<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>编辑收货地址</title>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="css/mui.min.css" rel="stylesheet" />
    <link href="./css/mui.picker.min.css" rel="stylesheet" />
    <link href="./css/mui.poppicker.css" rel="stylesheet" />
    <link rel="stylesheet" href="./css/public.css?v=v=20181211" />
    <link rel="stylesheet" href="./css/edit-address.css?v=v=20181211" />
    <link rel="stylesheet" href="./css/cxvalidation.css">
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=drawing,geometry,autocomplete,convertor"></script>
    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src='./js/jquery-3.2.1.min.js'></script>
    <script src="./js/mui.min.js"></script>
    <script src="./js/art-template.js"></script>
    <script src="./js/cxvalidation.js"></script>
    <script src="./js/config.js?v=v=20181211"></script>
    <script src="./js/mui.picker.js"></script>
    <script src="./js/mui.poppicker.js"></script>
    <script src="./js/city.data.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
    *{
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        color: #2d2d2d;
    }
    .add{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
    }
    .add_text{
        width: 90%;
        /*height: 20rem;*/
        position: fixed;
        bottom: 5px;
        left: 5%;
        right: 5%;
        background: #fff;
        border-radius: 3px;
        box-shadow: 1px 1px 10px #ccc;
    }
    .lable_before:before{
        content: '';
        display: block;
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        background: #18b6eb;
        margin-right: .3rem;
        margin-bottom: 0.7rem;
    }

    .lable_before_red:before{
        content: '';
        display: block;
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        background: #ff8550;
        margin-right: .3rem;
        margin-bottom: 1.3rem;
    }
    .lable_none:before{
        content: '';
        display: block;
        width: .4rem;
        height: .4rem;
        margin-right: .3rem;
    }
    .add-span{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        width: 89%;
        border-bottom: 1px solid #e6e6e6;
        padding: 0 0 0.7rem 0;
    }
    .add-span textarea,input{
        border: none;
        width: 100%;
        outline: 0;
        resize: none;
        overflow: auto;
    }

    .lable{
        width: 11%;
        padding: 0 0 0.8rem 0;
    }
    .add-btn{
        width: 100%;
        height: 3rem;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: 1rem;
    }
    .choose_addr_list{
        position: fixed;
        top: 8rem;
        left: 0;
        /* right: 0; */
        right: 0;
        bottom: 0rem;
        /* background: #fff; */
    }
    .scroll{
        overflow-y: scroll;
    }
    .address-choose{
        border-bottom: 1px solid #ccc;display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center
    }
    .radio{
        width: 1rem;
        height: 1rem;
        border: 1px solid #ccc;
        border-radius: 999px;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
    }
    .address{
        margin-left: 0.5rem
    }
    .active{
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 999px;
        background: #18b6eb;
    }
    .content{
        padding: 1rem
    }
    .chacha{
        width: 100%;
        height: 1.5rem;
        position: relative;
        z-index: 10;
    }
    .chacha_div{
        position: absolute;right: 0.5rem;top: 0.3rem;
    }
    .chacha_img{
        width: 1.5rem;height: 1.5rem;border-radius: 50%;border: 1px solid #ccc;display:  flex;align-items:  center;justify-content: center;
    }
    .scroll{
        background: #fff;
        position: absolute;
        top: 1.1rem;
        left: 1.2rem;
        right: 1.2rem;
        bottom: 0;
    }
    .search{
        position: absolute;font-size: 1rem;z-index: 5;display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;
    }

    .search_choosed{
        background: #fff;
        width: 100%;
    }
    .search_i{
        padding: 0.5rem 1rem;
    }
    .search_i_black{
        padding: 0.5rem 1rem;position: absolute;font-size: 1rem;z-index: 4;
    }
    .search_choosed input{
        margin-left: 1rem;
    }

    .search_choosed .search_i{
        border-left: 1px solid #ccc;
    }
    .fa-choosed{
        color: #25bdef;
    }

    .show_text{
        display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center
    }

    .show_text p{
        width: 2rem;height: 2px;background: #25bdef
    }
</style>

<body>
<header class="mui-bar mui-bar-nav header_change_color">
    <a style="color: #fff" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 style="color: #fff" class="mui-title">编辑收货地址</h1>
</header>
<div class="mui-content" style="font-size: 0.8rem">
    <form action="" name='myForm' id='myForm'>
        <div class="search search_choosed">
            <input type="text" class="search_address" style="font-size: 0.8rem" placeholder="请输入搜索地址(xx省xx市xx区xx)">
            <div class="search_i">
                <i class="fa fa-search fa-choosed"></i>
            </div>
        </div>
        <div class="search_i_black">
            <i class="fa fa-search"></i>
        </div>

        <div style="width:100%;" id="container"></div>
        <div class="add_text hidden_text">
            <div style="position: absolute;top: 0;right: 0">
                <div class="chacha_div search_cha">
                    <div class="chacha_img" style="border: none">
                        <img style="width: 70%" src="image/cuo.png">
                    </div>
                </div>
            </div>
            <div style="padding: 3rem 0.5rem;">
                <ul>
                    <li class="add lable_before">
                        <label class="lable">地址</label>
                        <p class="add-span" id="address_choose" onclick="choose()">
                            <input type="hidden" name="position_address" id="address_hidden" data-validation="required" data-validation-message='{"required":"请选择送水地址"}'/>
                            <span id="map_address">点击手动搜索</span>
                            <span style="margin-left: 1rem"> > </span>
                        </p>
                    </li>
                    <li class="add lable_none">
                        <label class="lable"></label>
                        <p class="add-span" style="padding: 0">
                            <textarea name="address" id="name" style="font: 95% tahoma,\5b8b\4f53,arial;" data-validation="required" data-validation-message='{"required":"请填写详细地址"}' placeholder="填写详细地址(如5号楼203号房)"></textarea>

                        </p>
                    </li>
                    <li class="add lable_before_red">
                        <label style="padding-bottom: 1.2rem;" class="lable">姓名</label>
                        <p class="add-span">
                            <input name="name" id="userName" style="padding-bottom: 0.5rem;" placeholder="收货人姓名" data-validation="required" data-validation-message='{"required":"请填写收货人姓名"}'/>
                        </p>
                    </li>
                    <li class="add lable_none">
                        <label class="lable"></label>
                        <p class="add-span">
                            <input style="padding-bottom: 0.5rem;" id="mobile" name="mobile" placeholder="请填写收货人手机号" data-validation="required,call[is_mobile]" data-validation-message='{"required":"请填写联系电话"}'/>
                        </p>
                    </li>
                </ul>
                <input type="hidden" id="latLng" name="area_position">
                <input type="hidden" name="province_id" id="province_id">
                <input type="hidden" name="city_id" id="city_id">
                <input type="hidden" name="area_id" id="area_id">
                <input type="hidden" name="area_info" id="area_info">
                <button type="submit" class="mui-btn-blue add-btn">确定</button>
            </div>
        </div>
        <div class="add_text show_text" style="display:none">
            <div style="padding: 0.3rem">
                <p></p>
                <p></p>
                <p></p>
            </div>
        </div>
    </form>
</div>

<div class="choose_addr_list" style="display: none">
    <div class="chacha">
        <div class="chacha_div">
            <div class="chacha_img">
                <img style="width: 70%" src="image/cuo.png">
            </div>
        </div>
    </div>
    <div class="scroll">
        <div class="content" id="choose">
        </div>
    </div>
</div>
<script type="text/html" id="choose-content">
    {{each nearPois as near index}}
    <div class="address-choose" >
        <div>
            <div  class="radio" data-index="{{index}}">
                <div ></div>  <!--class="{{if index == 0}}active{{/if}}"-->
            </div>
        </div>
        <div class="address">
            <p>{{near.address}}</p>
            <p style="color: #9a9a9a">{{near.name}}</p>
        </div>
    </div>
    {{/each}}
</script>
<script src='js/commen.js?v=v=20181211'></script>
<script src='js/edit-address-new.js?v=v=20181211'></script>

</body>

</html>
